<!--
 页面顶部下载组件
 参数callback：点击关闭按钮的回调

 显示隐藏由外部控制

 高度0.95rem
 -->
<template>
    <div class="download-wrapper">
      <a href="javascript:void(0)" @click="download()">
        <img src="./img/dwn_head.png">
      </a>
      <div class="close-wrapper" @click="closeHead()">
        <span class="close"></span>
      </div>
    </div>
</template>

<style lang="stylus" type="text/stylus" rel="stylesheet/stylus">

  .download-wrapper
    width 100%
    position fixed
    top 0
    height .95rem
    background rgba(0, 0, 0, 0.5)
    z-index 10
    a
      margin 0
      padding 0
      border 0
      font inherit
      font-size 100%
      vertical-align baseline
      -webkit-text-size-adjust 100%
      img
        height 100%
        width 100%
        border none

  .close-wrapper
    position absolute
    height 100%
    width .95rem
    top 0
    display block
    text-align center
    z-index:9
    .close
      display inline-block
      margin-top .3rem
      width .3rem
      height .3rem
      color white
      background-image url("./img/close.png")
      background-size .3rem .3rem
      background-repeat no-repeat



</style>

<script type="text/ecmascript-6">
    export default{
        props: {
          callback: {
            type: Function
          }
        },
      methods: {
        closeHead() {
          if (this.callback && this.callback instanceof Function) {
            this.callback()
          }
        },
        download() {
          location.href = 'http://a.app.qq.com/o/simple.jsp?pkgname=com.wochacha&g_f=991644'
          this.utils.doClickTJ('click', 'pointraised', 'download', '', '')
        }
      }
    }
</script>
